<template>
  <el-form v-show="getShow">
    <div class="login-scan-container">
      <qrcode-vue :value="qrCodeUrl" :size="300" level="H"></qrcode-vue>
    </div>
    <el-divider>{{ proxy.$t('login.ScanQrcodeLoginPage') }}</el-divider>
    <div style="padding: 0px 0px 20px 0px">
      <el-button plain size="large" style="width: 100%" @click="handleBackLogin">
        <span>{{ proxy.$t('login.back') }}</span>
      </el-button>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import QrcodeVue from 'qrcode.vue';
import { LoginStateEnum, useLoginState } from './loginState';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { getLoginState, handleBackLogin } = useLoginState();
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);

const qrCodeUrl = ref('https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi');
</script>

<style lang="scss" scoped>
.login-scan-container {
  padding: 0 20px 20px;
  text-align: center;
}
</style>
